import React, { PureComponent } from 'react';
import { message, Form, Input, Divider } from 'antd';
import { connect } from 'dva';
import SyOrderTableComponent from '../../components/SyOrderTableComponent';

@Form.create()
@connect(state => ({
  modelState: state.product,
}))
export default class ProductJD extends SyOrderTableComponent {

  // 缺省
  _initSortion = { sortField: 'id', sortOrder: 'desc', };
  _initPagination = { pageSize: 10, current: 1, };
  _initCriteriaQuery = {};
  _operator = [
    {
      needForm: false,
      needConfirm: true,
      buttonLabel: () => { if (this.state.statusQuery.state == 0) { return '上22架' } else { return '下架11' } },
      // okType: 'danger',
      buttonDisabled: 'none',
      confirmTitle: '确认 上架 / 下架？',
      handleEvent: () => {
        let needOnShelf = this.state.selectedRows.filter(entity => entity.state == 0).map(entity => entity.id);
        let needOffShelf = this.state.selectedRows.filter(entity => entity.state == 1).map(entity => entity.id);

        const { dispatch } = this.props;
        if (needOnShelf && needOnShelf.length > 0) {
          dispatch({
            type: this.state.baseModel + '/onShelf',
            payload: {
              ids: needOnShelf
            },
            callback: (code, msg) => {
              if (code == 200) {
                message.success(msg);
                this.resetCurrentForm();
                dispatch({
                  type: this.state.baseModel + '/fetch',
                  payload: {
                    ...this._initPagination,
                    ...this._initSortion,
                    ...this._initCriteriaQuery,
                    ...this.state.statusQuery,
                  }
                });
              } else {
                message.error(msg);
              }
            },
          });
        }

        if (needOffShelf && needOffShelf.length > 0) {
          dispatch({
            type: this.state.baseModel + '/offShelf',
            payload: {
              ids: needOffShelf
            },
            callback: (code, msg) => {
              if (code == 200) {
                message.success(msg);
                this.resetCurrentForm();
                dispatch({
                  type: this.state.baseModel + '/fetch',
                  payload: {
                    ...this._initPagination,
                    ...this._initSortion,
                    ...this._initCriteriaQuery,
                    ...this.state.statusQuery,
                  }
                });
              } else {
                message.error(msg);
              }
            },
          });
        }


      },
    },
  ];

  initSelection() {
    const { dispatch } = this.props;
    // dispatch({
    //   type: 'systemUser/fetchSelectItems',
    //   payload: { apiUrl: '/system/organization', selectName: 'systemOrganizationSelectItems' }
    // });
    dispatch({
      type: 'product/fetchSelectItems',
      payload: { service: '/product', apiUrl: '/productCategory', selectName: 'catSelectItems', current: 1, pageSize: 1000 }
    });
  }

  componentWillMount() {
    this.initSelection();
    this.setState({
      baseModel: 'product',
      fetchUrl: 'fetchJD',
      operator: this._operator,
      initPagination: this._initPagination,
      initSortion: this._initSortion,
      initCriteriaQuery: this._initCriteriaQuery,
      needSearch: true,
      needAdd: false,
      needEdit: true,
      needDelete: true,
      needTableColumnsOperator: true,
      needTableCheckbox: true,
      tableBorder: false,
      tableScroll: { y: 800 },
      tableColumns: [
        {
          title: 'SKU',
          dataIndex: 'sku',
          width: 100,
        },
        {
          title: '商品',
          dataIndex: 'imagePath',
          width: 100,
          type: 'image',
        },
        {
          title: '价格',
          dataIndex: '2',
          // width: 180,
          // sorter: true,
          align: 'left',
          render: (text, record) => {
            return (
              <div>
                <span>
                  {record.name}
                </span>
                <Divider style={{ margin: 3 }} />
                <span>
                  {record.price ? ('¥ ' + record.price) : '/'}
                </span>
              </div>
            );
          },
        },
        {
          title: '类型',
          dataIndex: 'thirdCategory',
          width: 120,
          sorter: true,
        },
        {
          title: '访问量',
          dataIndex: '4',
          width: 160,
          render: (text, record) => {
            return (
              <div>
                <span>
                  访客数： /
                  {/* {record.searchCount} */}
                </span>
                <Divider style={{ margin: 3 }} />
                <span>
                  浏览量： /
                  {/* {record.viewCount} */}
                </span>
              </div>
            );
          },
        },
        {
          title: '库存',
          dataIndex: 'strogeCount',
          width: 100,
        },
        {
          title: '总销量',
          dataIndex: 'saleCount',
          width: 100,
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
          width: 180,
        },
        {
          title: '序号',
          dataIndex: 'sort',
          width: 120,
        },
        {
          title: '首页推荐位',
          dataIndex: 'hotSort',
          width: 120,
        },
      ],
      searchFormItem: [
        // {
        //   name: 'userName',
        //   label: '用户名',
        //   placeholder: '用户名',
        //   type: 'string',
        //   selectOption: [{ name: '', value: '' }],
        // },
        // {
        //   name: 'name',
        //   label: '姓名',
        //   placeholder: '姓名',
        //   type: 'string',
        //   selectOption: [{ name: '', value: '' }],
        // },
        // {
        //   name: 'organization',
        //   label: '所属部门',
        //   placeholder: '所属部门',
        //   type: 'select',
        //   selectOption: { itemName: 'systemOrganizationSelectItems', name: 'organizationName', value: 'id', },
        // },
      ],
      simpleAddFormItem: [
        {
          name: 'name',
          label: '商品名称',
          placeholder: '商品名称',
          type: 'string',
          rules: [{
            required: true, message: '请输入商品名称',
          }],
        },
        {
          name: 'price',
          label: '价格',
          placeholder: '价格',
          type: 'number',
          rules: [{
            required: true, message: '请输入商品价格',
          }],
        },
        {
          name: 'catId',
          label: '商品分类',
          placeholder: '商品分类',
          type: 'select',
          selectOption: { itemName: 'catSelectItems', name: 'name', value: 'id' },
          rules: [{
            required: true, message: '请选择商品分类',
          }],
        },
      ],
      simpleEditFormItem: [
        {
          name: 'name',
          label: '商品名称',
          placeholder: '商品名称',
          type: 'string',
          rules: [{
            required: true, message: '请输入商品名称',
          }],
        },
        {
          name: 'price',
          label: '价格',
          placeholder: '价格',
          type: 'number',
          rules: [{
            required: true, message: '请输入商品价格',
          }],
        },
        // {
        //   name: 'catId',
        //   label: '商品分类',
        //   placeholder: '商品分类',
        //   type: 'select',
        //   selectOption: { itemName: 'catSelectItems', name: 'name', },
        //   rules: [{
        //     required: true, message: '请选择商品分类',
        //   }],
        // },
      ],
    });
  }

  constructor(props) {
    super(props);
  }

  componentDidMount() {
    super.componentDidMount();
  }

}
